<template>
  <el-table
    :data="mapdata"
    @row-click="click"
    :row-style="style"
    style="width: 300px; float: left; margin-left: 40px"
    height="300"
    :default-sort="{ prop: 'date', order: 'descending' }"
  >
    <el-table-column prop="name" fixed label="城市" sortable width="70">
    </el-table-column>
    <el-table-column prop="A" label="A" sortable width="70"> </el-table-column>
    <el-table-column prop="B" label="B" sortable width="70"> </el-table-column>
    <el-table-column prop="C" label="C" sortable width="70"> </el-table-column>
    <el-table-column prop="D" label="D" sortable width="70"> </el-table-column>
    <el-table-column prop="E" label="E" sortable width="70"> </el-table-column>
  </el-table>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "",
  data() {
    return {
      clicked: "",
    };
  },
  mounted() {},
  computed: {
    mapdata() {
      return this.$store.state.mapdata;
    },
    clickdata() {
      return this.$store.state.clickdata;
    },
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
    style({ row }) {
      //            console.log(row.name)
      // console.log(this.clicked)
      if (this.clicked == row.name) {
        return {
          "background-color": "orange",
          color: "red",
          cursor: "pointer",
        };
      }
      return { cursor: "pointer" };
    },

    click(row) {
      // console.log(row.name)
      this.$store.commit("qiehuan", row.name);
      if (row.name == this.clickdata.name) {
        this.clickdata.name = "";
        this.clickdata.A = "";
        this.clickdata.B = "";
        this.clickdata.C = "";
        this.clickdata.D = "";
        this.clickdata.E = "";
      } else {
        this.clickdata.name = row.name;
        this.clickdata.A = row.A;
        this.clickdata.B = row.B;
        this.clickdata.C = row.C;
        this.clickdata.D = row.D;
        this.clickdata.E = row.E;
        // this.clicked =  "clicked"
        // this.$store.commit('qiehuan',x.name)
      }
      if (row.name == this.clicked) {
        this.clicked = "";
      } else this.clicked = row.name;
      //                              this.$store.commit('qiehuan',row)
    },
  },
};
</script>

<style lang="scss" scoped>
.clicked {
  background-color: orangered;
}
</style>